<!Doctype html>
<html>
<head>
    <title>DataMgmt UI</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/sawp-in/adminPage/css/pretty-json.css" />
    <script type="text/javascript" src="/sawp-in/adminPage/js/jquery-1.11.1.min.js" ></script>
    <script type="text/javascript" src="/sawp-in/adminPage/js/underscore-min.js" ></script>
    <script type="text/javascript" src="/sawp-in/adminPage/js/backbone-min.js" ></script>
    <script type="text/javascript" src="/sawp-in/adminPage/js/pretty-json-min.js" ></script>
    <!-- just css for this page example -->
    <style type="text/css">
        body{
            width:700px;
            border-style: none;
            margin-left: auto;
            margin-right: auto;
        }

        textarea{
            width:600px;
            padding:4px 7px;
            border:1px solid #ccc;
            border-radius:4px;
            background:#fff;
            color:#333;
            margin-bottom:7px;
        }
    </style>
</head>

<body>
<script>
    $(document).ready(function() {
        var el = {
            btnAction: $('#action'),
            btnClear: $('#clear'),
            input: $('#input'),
            result: $('#result')
        };
        el.btnAction.on('click', function(){
            $.ajax({
	            type: "post",
	            url: "/sawp-in/adminPage/mgmt/select.json",
	            data: el.input.val(),
	            dataType: "json",
	            contentType :"application/sql;charset=utf-8",
	            success: function(data){
	            	var node = new PrettyJSON.view.Node({ 
	                    el:el.result,
	                    data: data,
	                    dateFormat:"DD/MM/YYYY - HH24:MI:SS"
	                });
	            }
	        });
        });

        el.btnClear.on('click', function(){
            el.input.val('');
            el.result.html('');
        });
    });
</script>
<h1>DataMgmt UI</h1>
<textarea id="input" rows="12"></textarea>
<br/>
<button id="action">执行</button>
<button id="clear">清除</button>
<br/>
<br/>
<span id="result"></span>
</body>
</html>
